<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>输入动态列表(Enter dynamic list)</title>
</head>
<body>

  <ul>
    <li>
      <h3>内容</h3>
      <button class="delete">删除</button>
    </li>
  </ul>

  <input class="input" type="text" placeholder="请输入内容" />
  <button class="increase">添加</button>

  <script>

    // 1. 获取元素
    const ulEl = document.querySelector('ul')
    const inputEl = document.querySelector('.input')
    const increaseEl = document.querySelector('.increase')

    // 2. 添加事件
    increaseEl.addEventListener('click', function() {
      addLi()
    })

    // 3. 删除事件
    ulEl.addEventListener('click', function(e) {
      if (e.target.classList.contains('delete')) {
        e.target.parentElement.remove()
      }
    })

    // 4. 按下回车键添加内容
    inputEl.addEventListener('keydown', function(e) {
      if (e.key === 'Enter') {
        addLi()
      }
    })

    // 添加内容
    function addLi() {
      // 2.1 获取输入框内容
      const inputValue = inputEl.value
      // 2.2 创建li元素
      const liEl = document.createElement('li')
      // 2.3 创建h3元素
      const h3El = document.createElement('h3')
      // 2.4 创建删除按钮
      const deleteBtn = document.createElement('button')
      // 2.5 设置删除按钮文本
      deleteBtn.innerText = '删除'
      // 2.6 设置h3元素文本
      h3El.innerText = inputValue
      // 2.7 设置删除按钮class
      deleteBtn.classList.add('delete')
      // 2.8 将h3元素和删除按钮添加到li元素中
      liEl.append(h3El, deleteBtn)
      // 2.9 将li元素添加到ul元素中
      ulEl.append(liEl)
      // 2.10 清空输入框内容
      inputEl.value = ''
    }
    
  </script>
  
</body>
</html>